<template>
  <div id="app">
    <transition :name="transitionName">
        <keep-alive include="Home,IM,OA,User,Ordercreate">
            <router-view class="router-view"></router-view>
        </keep-alive>
    </transition>
  </div>
</template>
<script>
import { Toast } from 'vant';
import {mapState} from 'vuex';
export default {
  name: 'App',
  data() {
    return {
      quitReady:false,
    }
  },
  created () {
    if (window.plus) {
      this.plusReady()
    } else {
      document.addEventListener('plusready', this.plusReady, false) // 
    }
  },
  mounted() {

  },
  computed:{
    ...mapState(['transitionName'])
  },
  methods:{
    plusReady() {
      plus.key.addEventListener("backbutton",() => {
          if(this.$route.name === 'Login') {
              plus.runtime.quit();
              return;
          } else {
             let meta = this.$route.meta;
             if(meta.homePage) {
                if(!this.quitReady) {
                    Toast('再按一次退出应用~');
                    this.quitReady = true;
                    setTimeout(() => {
                      this.quitReady = false;
                    },5000);
                    return;
                }
                plus.runtime.quit();
             } else {
               this.$animateBack();
             }
          }
      });
    }
  },
}
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 右进左出动画 */
.slide-rightin-leftout-enter {
  transform:translateX(100%);
}
.slide-rightin-leftout-enter-active {
  transition:transform .4s;
}
.slide-rightin-leftout-enter-to {
  transform:translateX(0);
}

.slide-rightin-leftout-leave {
  transform:translateX(0);
}
.slide-rightin-leftout-leave-active {
  transition:transform .4s;
}
.slide-rightin-leftout-leave-to {
  transform:translateX(-100%);
}


/* 左进右出动画 */
.slide-leftin-rightout-enter {
  transform:translateX(-100%);
}
.slide-leftin-rightout-enter-active {
  transition:transform .4s;
}
.slide-leftin-rightout-enter-to {
  transform:translateX(0);
}

.slide-leftin-rightout-leave {
  transform:translateX(0);
}
.slide-leftin-rightout-leave-active {
  transition:transform .4s;
}
.slide-leftin-rightout-leave-to {
  transform:translateX(100%);
}


</style>
